<!DOCTYPE HTML><html><head>
  <title>StepMotorCTL</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <style>
  
  body {
    font-family: "Lato", sans-serif;
    background-color: #232324; 
    padding: 15px;
    display: flex;
    margin:0 auto;
    color: white;
  }
  
  #inputs {
    border-radius: 20px;
    padding: 20px;
    margin: 0 auto;
    background-color: #2e2e2e; 
    width: 400px;
  }
  
  hr {
    display: flex;
  }
  
  h2 {
    text-align: center;
  }
  
  h1 {
    margin-top: 0px;
    margin-bottom: 15px;
    font-size: 40px;
    text-align: center;
    text-decoration: ;
    color: #0398fc;
    font-family: Tahoma, sans-serif;
    font-weight: normal;
  }
  
  #middle-box {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  
  .drop-box {
    float: right;
    height: 25px;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    background-color: #2b2b2b;
    border-radius: 5px;
    border-style: solid;
    border-color: #919191;
    border-width: 1px;
  }
  
  
  #bottom-box {
    text-align: center;
  }
  
  .save-button {
    background-color: #0398fc;
    border: none;
    color: white;
    padding: 14px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 10px;
    font-size: 17px;
  }
  
  .pos-button {
    background-color: #0398fc;
    border: none;
    color: white;
    padding: 10px 14px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 10px;
    
  }
  
  
  /* ----- CHECKBOX ------- */
  .container {
    display: inline;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    margin-left: 160px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  #enabled1-text, #enabled2-text {
      padding-top:5px;
      display: inline-block;
      margin-right: 20px;
  }
  /* Hide the browser's default checkbox */
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
  }

  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark {
    background-color: #ccc;
  }

  /* When the checkbox is checked, add a blue background */
  .container input:checked ~ .checkmark {
    background-color: #03fc94;
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked */
  .container input:checked ~ .checkmark:after {
    display: block;
  }

  /* Style the checkmark/indicator */
  .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  #powergood, #position, #status, #voltage, #stallguard{
    float: right;
  }
  
    .slider1 {
      width: 320px;
      height: 40px;
      accent-color: #0398fc;
   }


    /* Style the toggle switch container */
    .toggle-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px; /* Adjust spacing between checkbox and slider */
    }

    /* Style the toggle switch */
    .toggle-switch {
      float: right;
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
    }

    /* Hide the default checkbox */
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* The slider */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
      border-radius: 34px;
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 24px;
    }

    /* Slider styling when toggled */
    .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: #0398fc;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #f32121;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
  
    .cal-button {
      background-color: #0398fc;
      border: none;
      color: white;
      padding: 14px 30px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      transition-duration: 0.4s;
      cursor: pointer;
      border-radius: 10px;
      font-size: 17px;
    }
  </style>
  
</head><body>

  <div id="inputs">

    <h1>StepMotorCTL</h1>
  <hr>
    <form action="/get">
      <h2>Live Stats</h2>
      <div id="middle-box">
        <span class="stat-labels">PD Voltage:</span>
        <span id="voltage">Loading</span>
        <br>
        <span class="stat-labels">Driver Status:</span>
        <span id="status">Loading</span>
        <br>
      </div>
    </form>
 
    <hr>
  
    <form action="/save" method="post">
    <h2>Settings</h2>
      <div id="middle-box">
        <label for="speed">Speed:</label>
        <select id="speed" name="speed" class="drop-box">
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
          <option value="300">300</option>
          <option value="400">400</option>
        </select>
      </div>
      <div id="middle-box">
        <label for="accel">Accel:</label>
        <select id="accel" name="accel" class="drop-box">
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
          <option value="300">300</option>
          <option value="400">400</option>
        </select>
      </div>

      <div id="bottom-box">
        <input class="save-button" type="submit" value="Save">
      </div>
    </form>

    <br>
    <hr>

    <h2>Velocity Control</h2>
    <div id="middle-box">
      <br>
      <input type='range' class='slider1' id='slider' min='0' max='100' value='0' onchange='updateSlider()' onpointerup='checkReset()'>
   </div>   
   
   <hr>
    
   <h2>Position Control</h2>
   <div id="bottom-box">
    <button class="pos-button" type="submit" onclick="but1()"><<</button>
    <button class="pos-button" type="submit" onclick="but2()"><</button>
    <button class="pos-button" type="submit" onclick="but3()">></button>
    <button class="pos-button" type="submit" onclick="but4()">>></button>
   </div>
   
    <br>
  <hr>

    <div id="bottom-box">
      <tyble> calibrate </tyble>
      <input type="checkbox" id="calbox" onchange='updatecal()'>
    </div>
  </div>

</body></html>

<script>
  window.addEventListener('load', function() {
    console.log('window loaded');

  });

  function getspeed() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        console.log('speed recive:', this.responseText);

        var speedValue = this.responseText;
        var speedSelect = document.getElementById('speed');
        for (var i = 0; i < speedSelect.options.length; i++) {
          if (speedSelect.options[i].value === speedValue) {
            speedSelect.selectedIndex = i;
            break;
          }
        }
      }
    };
    xhttp.open("GET", "/speed", true);
    xhttp.send();
  }

  function getaccel() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        console.log('accel recive:', this.responseText);

        var accelValue = this.responseText;
        var accelSelect = document.getElementById('accel');
        for (var i = 0; i < accelSelect.options.length; i++) {
          if (accelSelect.options[i].value === accelValue) {
            accelSelect.selectedIndex = i;
            break;
          }
        }
      }
    };
    xhttp.open("GET", "/accel", true);
    xhttp.send();
  }

  function getSlider() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById('slider').value = parseInt(this.responseText);
        console.log('recive:', this.responseText);
      }
    };
    xhttp.open("GET", "/slider", true);
    xhttp.send();
  }

  function getvoltage() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("voltage").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/voltage", true);
    xhttp.send();
  }

  function getstatus() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("status").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/status", true);
    xhttp.send();
  }

  getSlider();
  getspeed();
  getaccel();

  var cnt = 0;

  /* Auto update stats without refresh */ 
  setInterval(function ( ) {
    if (cnt == 0) {
      getvoltage(); // Get voltage
      getstatus();  // Get status
      getSlider();
    }

    cnt++;

    if (cnt == 30) {
      cnt = 0;
    }

  }, 1000 ) ;

  /* Scripts for velocity toggle and slider */
  var resetEnabled = false;

  function updateSlider() {
    var sliderValue = document.getElementById('slider').value;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/update', true);
    xhr.setRequestHeader('Content-Type', 'staper');
    xhr.send('slider=' + sliderValue);
  }

  function checkReset() {
    if (resetEnabled) {
      resetSlider(); // Reset slider if enabled
    }
  }

  function resetSlider() {
    document.getElementById('slider').value = 0; // Reset to middle position
    updateSlider(); // Trigger update
  }
  
  /* handle button presses */
  function but1() {
    document.getElementById('slider').value = 0;
    updateSlider();
  }
  
  function but2() {
    var val = document.getElementById('slider').value;

    val = Number(val);

    document.getElementById('slider').value = val - 10;
    updateSlider();
  }
  
  function but3() {
    var val = document.getElementById('slider').value;
  
    val = Number(val);

    document.getElementById('slider').value = val + 10;
    console.log('slider but3 val:', document.getElementById('slider').value);
    updateSlider();
  }
  
  function but4() {
    document.getElementById('slider').value = 100;
    updateSlider();
  }
  
  function updatecal() {
    var val = document.getElementById('calbox').checked;

    console.log('cal box:', val);
    var xhr = new XMLHttpRequest();

    xhr.open('POST', '/update', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('cal=' + val);
  }
</script>
